<template>
	<div class="flex flex-col h-full bg-gray-100 dark:bg-black overflow-hidden">
		<!-- 分类 Tabs -->
		<div class="flex-shrink-0 pl-4 pt-4 pb-2 flex items-center justify-between w-full">
			<CategoryTabs v-model="activeCategoryId" />
			<Search />
		</div>

		<!-- 
      【重要】在这里添加条件渲染逻辑
      - 如果是首次加载 (isLoading 且列表为空)，则显示 LoadingSpinner
      - 否则，显示 ListView
    -->
		<LoadingSpinner v-if="isInitialLoading" />
		<!-- 
      使用封装好的 ListView 组件
      - 绑定数据和状态 props
      - 监听事件来触发数据操作
      - 使用插槽来定义 UI
      :key="activeCategoryId" 【重要】移除，组件实例将保持不变。
    -->
		<ListView
			v-show="!isInitialLoading"
			ref="listViewRef"
			:data-list="currentList"
			:is-loading="isLoading"
			:is-finished="isCurrentCategoryFinished"
			content-class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
			@pull-down-refresh="handleRefresh"
			@load-more="handleLoadMore"
			@swipe-left="switchToNextCategory"
			@swipe-right="switchToPrevCategory"
		>
			<!-- #item 插槽：定义每个列表项的渲染 -->
			<template #item="{ item }">
				<ListItemCard :item="item" />
			</template>

			<!-- #empty 插槽：自定义空状态显示 -->
			<template #empty>
				<div class="text-center p-12">
					<p class="text-gray-500 dark:text-gray-400">
						这个分类下什么都没有找到哦~
					</p>
				</div>
			</template>
		</ListView>
	</div>
</template>
<script lang="ts">
export default {
  name: 'Home'
}
</script>

<script setup lang="ts">
import { ref, onMounted, watch, computed, nextTick, onActivated, onDeactivated } from "vue";
import { useCategoryStore } from "@/store/modules/category";
import { usePexelsStore } from "@/store/modules/pexels";

import Search from "./components/Search.vue";
import LoadingSpinner from "@/components/LoadingSpinner.vue";
import CategoryTabs from "./components/CategoryTabs.vue";
import ListView from "@/components/ListView.vue"; // 引入封装的组件
import ListItemCard from "./components/ListItemCard.vue"; // 引入独立的卡片组件
import { useModal } from "@/hooks/useModal";
import ToastModal from "@/modal/components/ToastModal.vue";
import { onBeforeRouteLeave } from "vue-router";

const categoryStore = useCategoryStore();
const pexelsStore = usePexelsStore();


onActivated( async () => {
  console.log('Home component activated')
	await nextTick();
  if (listViewRef.value) {
    // 从 store 中获取当前激活分类的已保存滚动位置
    const savedScrollTop = pexelsStore.getScrollTopByCategoryId(activeCategoryId.value);
    // 设置滚动位置
    listViewRef.value.setScrollPosition(savedScrollTop);
  }
})

// 组件失活时 由于路由切换，Home 组件在 DOM 树中的父容器（或其自身）可能已经被设置为 display: none 或者从布局流中移除，为新页面 Message 的进入做准备。
// 当一个元素的 display 为 none 时，或者它不在主文档的布局流中时，它的几何属性（如 scrollTop）会被浏览器重置或计算为 0。
// 因此，当你的 onDeactivated 代码执行 listViewRef.value.getScrollPosition() 时，它读取到的是已经被浏览器“清零”的 scrollTop 值。
onDeactivated(() => {
  console.log('Home component deactivated')
	// if(listViewRef.value){
	// 	const lastScrollTop = listViewRef.value.getScrollPosition();
	// 	console.log(activeCategoryId.value , lastScrollTop);
	// 	pexelsStore.saveScrollPosition(activeCategoryId.value , lastScrollTop);
	// }
})

// onBeforeRouteLeave 会在当前路由即将离开时被调用，此时组件实例仍然是激活状态，DOM 也完全可见，scrollTop 的值是准确的。
onBeforeRouteLeave((_to, _from) => {
  console.log(`Leaving Home, saving scroll position for category: ${activeCategoryId.value}`);
  if (listViewRef.value) {
    const lastScrollTop = listViewRef.value.getScrollPosition();

    pexelsStore.saveScrollPosition(activeCategoryId.value, lastScrollTop);
  }
});

const modal = useModal();

// 从 store 中获取响应式状态
const isLoading = computed(() => pexelsStore.isLoading);
const currentList = computed(() =>
	pexelsStore.getListByCategoryId(activeCategoryId.value)
);
const isCurrentCategoryFinished = computed(() =>
	pexelsStore.getFinishedStateByCategoryId(activeCategoryId.value)
);

// 【新增】一个 computed 属性，专门用于判断是否是“初始加载”状态
const isInitialLoading = computed(() => {
	// 必须同时满足：正在加载中 + 当前列表为空
	return isLoading.value && currentList.value.length === 0;
});

const activeCategoryId = ref<string>("");
const listViewRef = ref<InstanceType<typeof ListView> | null>(null);

/**
 * 监听分类变化，这是实现无缝切换的核心逻辑
 * @param newId 新的分类ID
 * @param oldId 旧的分类ID
 */
watch(activeCategoryId, async (newId, oldId) => {
	if (!newId) return;

	// 1. 保存旧分类的滚动位置 (如果存在旧分类)
	if (oldId && listViewRef.value) {
		const lastScrollTop = listViewRef.value.getScrollPosition();
		pexelsStore.saveScrollPosition(oldId, lastScrollTop);
	}
	
	// 2. 检查新分类的数据是否已缓存，如果没有，则发起请求加载
	if (!pexelsStore.hasDataFor(newId)) {
		// 这里不需要 await，让它在后台加载即可，UI会因为 isLoading 变化而响应
		pexelsStore.refreshList(newId);
	}

	// 3. 恢复新分类的滚动位置
	// 【关键】使用 nextTick 确保 DOM 已经根据 currentList 更新完毕
	await nextTick();
	if (listViewRef.value) {
		const newScrollTop = pexelsStore.getScrollTopByCategoryId(newId);
		listViewRef.value.setScrollPosition(newScrollTop);
	}
});

onMounted(async () => {
	if (categoryStore.list.length === 0) {
		await categoryStore.getCategoryList();
	}
	if (!activeCategoryId.value && categoryStore.list.length > 0) {
		activeCategoryId.value = categoryStore.list[0].id;
	}
});

// --- 事件处理器 ---

// 处理下拉刷新事件
const handleRefresh = () => {
	// 手动下拉刷新，应该强制更新数据
	pexelsStore.refreshList(activeCategoryId.value, true);
	modal.show(
		ToastModal,
		{ message: "刷新成功！", showClose: false },
		{
			position: "bottom",
			animationType: "slide-up",
			showOverlay: false,
			closeOnClickOverlay: false,
			duration: 1200,
		}
	);
};

// 处理上拉加载更多事件
const handleLoadMore = () => {
	pexelsStore.loadMore(activeCategoryId.value);
};

// 切换到下一个分类
const switchToNextCategory = () => {
	const currentIndex = categoryStore.list.findIndex(
		c => c.id === activeCategoryId.value
	);
	if (currentIndex < categoryStore.list.length - 1) {
		activeCategoryId.value = categoryStore.list[currentIndex + 1].id;
	}
};

// 切换到上一个分类
const switchToPrevCategory = () => {
	const currentIndex = categoryStore.list.findIndex(
		c => c.id === activeCategoryId.value
	);
	if (currentIndex > 0) {
		activeCategoryId.value = categoryStore.list[currentIndex - 1].id;
	}
};
</script>
